<template>
  <div class="app-container">
    <div class="cost-statistics">
      <!-- 搜索区域 -->
      <div class="head-container">
        <div class="form-head">
          <!-- 医生姓名 -->
          <el-input
            v-model="query.docName"
            placeholder="医生姓名"
            style="width: 150px"
            class="filter-item"
            :clearable="true"
            size='small'
          />
          <!-- 调取方式 -->
          <el-select
            v-model="query.historyType"
            style="width: 150px"
            class="filter-item"
            :clearable="false"
          >
            <template v-for="item in typeList">
              <el-option
                :label="item.text"
                :value="item.id"
                :key="item.id"
              />
            </template>
          </el-select>
          <!-- 时间 -->
          <datePicker
            :type="query.historyType"
            @change="onChangeTime"
            v-model="defaultDate"
            class="date-item"
            ref="datePicker"
          />
          <!-- 搜索按钮 -->
          <span>
            <el-button
              class="filter-item"
              size="mini"
              type="success"
              icon="el-icon-search"
              @click="onQuery"
            >
              搜索
            </el-button>
            <el-button
              class="filter-item"
              size="mini"
              type="warning"
              icon="el-icon-refresh-left"
              @click="onResetQuery"
            >
              重置
            </el-button>
          </span>
        </div>
        <div class="form-right">
          <el-button
            icon="el-icon-download"
            :loading="loading"
            @click="onExport"
            type="primary"
            size="mini"
          >导出数据</el-button>
        </div>
      </div>
      <!-- 总计... -->
      <sumStatistics :data="costSums"/>
      <!--表格渲染 @sort-change="crud.sortChange" -->
      <div class="table">
        <tableStatistics
          v-loading="crud.loading"
          ref="tableStatistics"
          :columns="columns"
          :data="crud.data"
        >
          <template slot="xyPayInfoFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.xyPayInfoFee, 2) }}</span>
          </template>
          <template slot="ypPayInfoFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.ypPayInfoFee, 2) }}</span>
          </template>
          <template slot="kljPayInfoFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.kljPayInfoFee, 2) }}</span>
          </template>
          <template slot="payFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.payFee, 2) }}</span>
          </template>
          <template slot="refundFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.refundFee, 2) }}</span>
          </template>
        </tableStatistics>
      </div>
    </div>
  </div>
</template>

<script>
import { costSums, columns, typeList } from '@/const/costStatistics';
import { outInfoSalesDoc } from "@/api/statistics/index";
import CRUD, { presenter, header } from '@crud/crud';
import tableStatistics from "../components/table";
import sumStatistics from "../components/sum";
import rrOperation from '@crud/RR.operation';
import { formatMoney } from "@/utils/index";
import datePicker from '../components/date';

let defaultCrud = CRUD({
  url: 'drugStatistics/infoSalesDoc',
  queryOnPresenterCreated: false,
  pagination: false,
  title: '医生处方',
  method: 'post',
  time: 0,
  query: {
    startTime: null,
    docName: null,
    endTime: null,
    historyType: 0, // 0-实时,1-归档
  },
  resultHandle(crud, res) {
    crud.data = res.infoSaleVoList;
  }
});

export default {
  name: "costStatistics",
  components: {
    tableStatistics,
    sumStatistics,
    rrOperation,
    datePicker
  },
  mixins: [
    presenter(defaultCrud),
    header()
  ],
  data() {
    return {
      defaultDate: null,
      loading: false, // 操作按钮防重复提交
      typeList,
      costSums,
      columns
    };
  },
  mounted() {
    if(this.query.startTime && this.query.endTime) {
      this.defaultDate = [
        this.query.startTime,
        this.query.endTime
      ];
    }
  },
  methods: {
    formatMoney,
    [CRUD.HOOK.dataLoadSuccess](crud, list, res) {
      this.costSums[0].value = res.docNum;
      this.costSums[1].value = res.userNum;
    },
    onQuery() {
      if(!this.query.startTime || !this.query.endTime) {
        this.$message.error('请筛选时间范围');
        return;
      }
      this.crud.toQuery();
    },
    // 时间处理
    onChangeTime() {
      if(this.defaultDate && this.defaultDate.length) {
        this.query.startTime = this.defaultDate[0];
        this.query.endTime = this.defaultDate[1];
        this.onQuery();
      } else {
        this.query.startTime = null;
        this.query.endTime = null;
      }
    },
    // 重置
    onResetQuery() {
      this.defaultDate = null;
      this.crud.resetQuery(false);
    },
    // 导出
    onExport() {
      let data = {
        ...this.query
      }
      data.startTime += " 00:00:00";
      data.endTime += " 23:59:59";
      outInfoSalesDoc(data);
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  background: #F5F5F5;
  padding: 15px;
  
  .cost-statistics {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    background: #FFFFFF;
    padding: 20px 24px;
    height: 100%;

    .head-container {
      justify-content: space-between;
      display: flex;
    }

    .table {
      height: calc(100% - 127px);
      margin-top: 10px;
    }
  }
}

</style>